<template>
    <div class="bannerShow" v-loading="loading">
        <!-- 先写结构 -->

        <!-- 有数据在渲染 -> 没有数据就不渲染 -->
        <template v-if="showImgCount">
            <div class="swiper demo" ref="mySwiper">
                <div class="swiper-wrapper">
                    <template v-for="(item, index) in list">
                        <div class="swiper-slide" v-if="item.flag" :key="index">
                            <img :src="item.img" alt="">
                        </div>
                    </template>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>

                <!-- 如果需要滚动条 -->
                <!-- <div class="swiper-scrollbar"></div> -->
            </div>
        </template>
        <template v-if="loading==false&&showImgCount==0">
            <el-empty description="暂无图片"></el-empty>
        </template>
    </div>
</template>

<script>
import Swiper, { Pagination, Navigation, Autoplay } from "swiper";
import { getBannerListAPI } from "@/api/banner";
export default {
    name: "bannerShowView",
    data() {
        return {
            list: [],
            mySwiper: null,
            loading:true,  // 进入当前页面时开始加载  => 数据请求成功之后判断如何显示
        }
    },
    methods: {
        async getBannerList() {
            this.loading = true;
            try {
                var res = await getBannerListAPI();
                console.log("请求成功", res);
                this.list = res.data;
                this.loading = false;
            } catch (err) {
                console.log("失败", err);
            }
        },
        initSwiper() {
            // 初始化swiper
            // this.$refs.mySwiper  => 对应ref名称获取元素
            this.mySwiper = new Swiper(this.$refs.mySwiper, {
                // direction: 'vertical', // 垂直切换选项
                loop: true, // 循环模式选项
                autoplay: true,  //自动播放

                // 在 Swiper 的上启用动态检查器(Mutation Observer)，如果你更改swiper 的样式（隐藏/显示）或修改其子元素（添加/删除幻灯片），Swiper 会更新（重新初始化）并触发 observerUpdate 事件。
                observer: true,   // 监听当前元素及其子元素的变化 -> 重新初始化
                observeParents: true,  // 监听父代元素的变化

                // 在当前swiper实例中 使用 自动播放  分页器(点)  前后按钮
                modules: [Pagination, Navigation, Autoplay],

                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true, // 是否可以点击切换
                },

                // 如果需要前进后退按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },

                // 如果需要滚动条
                // scrollbar: {
                //     el: '.swiper-scrollbar',
                // },
            })
        }
    },
    computed:{
        showImgCount(){
            return this.list.filter(v=>v.flag).length;
        }
    },
    watch:{
        list(){
            // 监听数据改变 -> 初始化swiper -> 也不行(数据变了 视图可能还没有更新)
            // this.initSwiper();

            // 监听数据改变 -> 视图更新之后 -> 在初始化
            this.$nextTick(()=>{
                this.initSwiper();
            })

        }
    },
    mounted() {
        this.getBannerList();
        this.initSwiper();  // 组件挂载完毕 -> 初始化swiper (此时list可能还没有数据 -> 初始化swiper没有用)
    }
}
</script>

<style lang="scss" scoped>
// 在引入样式
// @import "swiper/swiper-bundle.min.css";
.bannerShow,
.demo {
    width: 100%;
    height: 100%;
}

.swiper .swiper-slide img {
    width: 100%;
}
</style>